<div th:replace="~{ app :: layout ('Docker 快速入门视频', ~{::#css}, _, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org">
    <div id="css">
        <link href="vendor/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    </div>

    <div class="container video-collections-show mb-2rem" id="main">
        <div class="row">
            <div class="col-lg-8">
                <p class="font-size-12 text-muted mb-1">名称</p>
                <h1 class="h4 mb-2rem">Docker 快速入门视频</h1>
                <p class="font-size-12 text-muted mb-1">简介</p>
                <p class="mb-2rem">本套视频是在阅读 Docker 官方入门文档的过程中录制的，可视为 Docker 官方入门文档的不完全翻译视频版本。介绍了什么是容器、什么是镜像；以及如何创建镜像、运行容器、构建镜像最佳实践等 Docker 基础知识。</p>
                <p class="font-size-12 text-muted mb-1">作者</p>
                <p class="mb-2rem"><a href="#">ddd</a></p>
                <div class="collections-syllabus-box">
                    <p class="font-size-12 text-muted mb-1">内容</p>
                    <div class="py-2 small d-flex justify-content-between">
                        <span>共 1 个章节 • 10 个讲座 • 总时长 00:00</span>
                        <a href="javascript:void(0)" class="toggle-syllabus"></a>
                    </div>
                    <div class="collections-syllabus">
                        <div class="lecture-group-wrapper">
                            <div class="lecture-group-title clearfix" data-toggle="collapse"
                                 data-target="#collapse-1"
                                 aria-expanded="true">
                                <div class="title float-left">
                                    视频列表
                                </div>
                                <div class="float-right">
                                        <span class="total-lectures">
                                            10 Lectures
                                        </span>
                                    <span class="total-time">
                                            00:00
                                        </span>
                                </div>
                            </div>
                        </div>
                        <div id="collapse-1"
                             class="lecture-list collapse show">
                            <ul class="font-size-14">
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">安装 Docker</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">运行第一个 Docker 容器</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">创建自己的 Docker 镜像</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">更新应用并重新构建 Docker 镜像</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">分享自己创建的 Docker 镜像</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">使用 Docker 命名卷 named volume 持久化数据</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">使用 bind mounts 快速搭建本地开发环境</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">Docker 多容器应用 Multi-Container Apps</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">使用 Docker Compose</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                                <a href="videos-show-lecture">
                                    <li class="lecture">
                                        <span class="lecture-title">构建 Docker 镜像的最佳实践</span>
                                        <div class="float-right">
                                            <span class="lecture-time">00:00</span>
                                        </div>
                                    </li>
                                </a>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mt-lg-0 mt-3 animated fadeInRight">
                <div class="video-collections-sidebar">
                    <div class="cover">
                        <img src="img/temp/G8g9oBCZUz1628239518.png" class="img-fluid ratio-16x9">
                    </div>
                    <div class="video-collections-sidebar-text-box text-center text-primary">
                        <p class="text-monospace">免费</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="js">
        <script>
            $(document).ready(function () {
                $(".toggle-syllabus").on("click", function () {
                    $(this).toggleClass("active");

                    if ($(this).hasClass('active')) {
                        expandAll();
                    } else {
                        collapseAll();
                    }
                })
            });

            function collapseAll() {
                $(".lecture-group-title").each(function () {
                    $(this).addClass('collapsed');
                    $(this).attr('aria-expanded', false);
                    $($(this).attr('data-target')).removeClass('show');
                });
            }

            function expandAll() {
                $(".lecture-group-title").each(function () {
                    $(this).attr('aria-expanded', true);
                    $(this).removeClass('collapsed');
                    $($(this).attr('data-target')).addClass('show');
                });
            }
        </script>
    </div>
</div>